<template>
	<view>
		<!--活动列表-->
		<view class="act-list" v-if="activities.length > 0 ">
			<view class="act-item " v-for="(item,index) in activities" :key="index"  @click="godetail(item.id)" >
				<view class="type-desc">
					<image src="/static/images/icon/online_act_icon.png" mode="aspectFill" v-if="item.type == '线上'"></image>
					<image src="/static/images/icon/offline_act_icon.png" mode="aspectFill" v-else></image>
				</view>
				<view class="tui-news-picbox">
					<block >
						<image :src="item.cover" mode="aspectFill" class="tui-block"></image>  
					</block>
				</view>
				<view class="tui-news-tbox tui-flex-column tui-flex-between" >
					<view class="title" v-html="item.title"></view>
					<view class="intro" v-html="item.intro"></view>
					<view class="other">
						<!-- <view class="visited">浏览：{{item.pageview}} </view> -->
						<view class="time">{{item.start_at }} ~ {{item.end_at }} </view>
						<view class="joined"v-if="item.people" >
							<image src="/static/images/icon/heat.png" mode="" v-if="item.people >= 10"></image>
							<view class="">{{item.people}}人参加</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create_act" v-if="!phone">
		  <image src="/static/images/icon/create_act.png" mode="aspectFill"></image>
		</button>
		<view class="create_act" @click="goto('/pages/activity/comps/createActivity')" v-else>
			
			<image src="/static/images/icon/create_act.png" mode="aspectFill"></image>
		</view>
		<view class="none" v-if="isLoad && !activities.length">
			暂时没有活动喔~_~
		</view>
		
	</view>
</template>

<script>
	import api from '../../common/api.js'
	import {mapState} from 'vuex'
	import {formatDate} from '../../common/utils.js'
	export default {
		
		data() {
			return {
				activities:[],
				isLoad:1,
				act_page:1,			//活动列表页数
				act_limit:8,		//活动单页数据
			}
		},
		
		computed:mapState(['phone']),
		
		async onShow() {
			this.activities = await this.getActivities(this.act_page,this.act_limit)
		},
		
		methods: {
			
			async getPhoneNumber (e) {//手机号授权
		　　if(e.detail.errMsg=="getPhoneNumber:ok"){
					let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
					let sres = await api.SetUserPhone(res.purePhoneNumber)
					if(sres.err == 0) {
						this.$store.commit('setPhone',res.purePhoneNumber)
						uni.showToast({
							title:sres.msg,
							duration:800
						})
					}
				}else{
			      console.log('用户拒绝了手机号授权') ;   
			    }
			},
			
			godetail() {//进入活动详情页
				uni.navigateTo({
					url:'/pages/activity/comps/Detail?id='+arguments[0],	
				})
			},
			
			goto(url) {//相关页面跳转
				uni.navigateTo({
					url
				})
			},
			
			async getActivities(act_page,act_limit) {//获取活动列表数据
				return await api.GetActivities(act_page,act_limit)
			},
		},
		
		async onReachBottom() {
			let list = await this.GetActivities(this.page+1,this.limit)
			if(list && list.length > 0) {
				this.activities.push(...list)
				this.act_page ++
			}else {
				uni.showToast({ title:'没有更多了', icon: "none" ,duration:800});
			}
		}
	}
</script>

<style lang="scss" scoped>

page {
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.none {
	height: calc(100vh - 150rpx);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.act-list {
	overflow: hidden;
	box-sizing: border-box;
	.act-item {
		display: flex;	
		position: relative;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx 10rpx 20rpx 30rpx;
		overflow: hidden;
		border-bottom: 1rpx solid #F3F6F5;
		.type-desc {
			position: absolute;
			left: 0;
			top: 0;
			z-index:1;
			image {
				width: 115rpx;
				height: 115rpx;
			}
		}
	}
}
.tui-news-picbox {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between ;
	width: 220rpx;
	height: 150rpx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.tui-block {
	display: block;
}
.tui-news-tbox {	
	width: 445rpx;
	height: 150rpx;
	display: flex;
	margin-left: 20rpx;
	.title {
		font-size: 30rpx;
	
}
.intro {
	margin-top: 6rpx;
	font-size: 26rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.other {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;	
	font-size: 24rpx;
	margin-top: 6rpx;
	height: 30rpx;
	color: #999999;
	.visited {
		width: 150rpx;
	}
	.joined {
		display: flex;
		// width: 200rpx;
		image {
			width: 25rpx;
			display: block;
			height: 28rpx;
			margin-right: 8rpx;
		}
	}
	.time {
		overflow: hidden;
		white-space: nowrap;
		// text-overflow: ellipsis;
	}
}
}

.tui-news-picbox {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between ;
	width: 220rpx;
	height: 150rpx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column ;
}

.tui-flex-between {
	justify-content: space-between ;
}
button {
	padding: 0;
	margin: 0;
	background: transparent;
	color: #fff;
	// display: flex;
	// align-items: center;
	font-size: 32rpx;
}
.create_act {
	position: fixed;
	right: 36rpx;
	bottom: 280rpx;
	width: 90rpx;
	height: 90rpx;
	z-index: 1;
	color: #fff;
	font-size: 28rpx; 
	align-items: center;
	display: flex;
	justify-content: center;
	image {
		width: 90rpx;
		height: 90rpx;
	}
}
</style>
